<script setup lang="ts">
import { showSuccessToast } from 'vant';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getStorage, setStorage } from '../utils/cache';
import { API } from '../api';
import { MUserEntity } from '../api/_Api';
import { UnwrapRef } from 'vue';
const push = useRouter().push
const loading = ref(false)
const onSubmit = async (values: UnwrapRef<typeof form>) => {
    console.log('submit', values);
    try {
        loading.value = true
        const { data: { data } } = await API.orderControllerXycUpdate({ phone: values.phone, name: values.name, address: values.address, brand: values.brand })
        console.log("🚀 ~ onSubmit ~ data:", data)
        showSuccessToast({ message: '录入成功~' });
        setStorage('hisBrand', values.brand)
        push('/inputList')
    } finally {
        loading.value = false
    }
};
const userInfo = JSON.parse(getStorage('userInfo') || '{}') as MUserEntity
const form = ref({ address: '', name: '', phone: '', brand: userInfo.realName, userId: userInfo.nickName })
// const showPickerBrand = ref(false);
// const brandList = [
//     { text: "京东家电", value: '1' },
//     { text: "日立中央空调", value: '2' },
//     { text: "金玉名家肌肤砖", value: '3' },
//     { text: "德田陶瓷", value: '4' },
//     { text: "申旺卫浴", value: '5' },
//     { text: "希箭卫浴", value: '6' },
//     { text: "帅康厨电", value: '7' },
//     { text: "鼎配全屋定制", value: '8' },
//     { text: "奥克全屋定制", value: '9' },
//     { text: "至美美学定制", value: '10' },
//     { text: "飞宇门窗", value: '11' },
//     { text: "乐臣木门", value: '12' },
//     { text: "梵戴克地板", value: '13' },
//     { text: "三棵树", value: '14' },
//     { text: "慕思V6家居", value: '15' },
//     { text: "爱舒床垫", value: '16' },
//     { text: "名家布艺", value: '17' },
//     { text: "西蒙电气", value: '18' },
//     { text: "联塑管道", value: '19' },
// ];
// const onConfirmBrand = ({ selectedOptions }: any) => {
//     form.value.brand = selectedOptions[0]?.text;
//     showPickerBrand.value = false;
// }
</script>

<template>
    <van-form @submit="onSubmit" class="form">
        <van-cell-group inset>

            <van-field v-model.trim="form.name" name="name" label="贵宾姓名" placeholder="贵宾姓名"
                :rules="[{ required: true, message: '请填写贵宾姓名' }]" />
            <van-field v-model.trim="form.phone" name="phone" label="贵宾电话" placeholder="贵宾电话"
                :rules="[{ required: true, message: '请填写贵宾电话' }, { required: true, message: '手机号码格式不正常~', pattern: /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:(?:10|4[01])\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/ }]" />
            <van-field v-model.trim="form.address" name="address" label="小区地址" placeholder="小区地址"
                :rules="[{ required: true, message: '请填写小区地址' }]" />
            <van-field v-model.trim="form.userId" name="userId" label="售卡人" readonly placeholder="售卡人" />
            <van-field v-model.trim="form.brand" name="brand" label="售卡品牌" readonly placeholder="售卡品牌"
                :rules="[{ required: true, message: '请填写售卡品牌' }]" />
            <!-- <van-popup v-model:show="showPickerBrand" position="bottom">
                <van-picker :columns="brandList" @confirm="onConfirmBrand" @cancel="showPickerBrand = false" />
            </van-popup> -->
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" :loading="loading">
                提交
            </van-button>
        </div>
        <van-button type="primary" size="normal" round @click="push('/inputList')" icon="wap-home-o"
            class="add"></van-button>
    </van-form>
</template>

<style scoped lang="less">
.form {
    padding: 30px 0;
    min-height: 100vh;
    width: 100vw;
}

.add {
    position: fixed;
    right: 30px;
    bottom: 30vw;
    height: 40px;
    width: 40px;
}
</style>
